<template>
  <div class="accountright">
    <div class="content">
      <div class="content-media flex">
        <div :class="{active:media===0}" @click="subMedia(0)">{{$t("ac.staket")}}</div>
        <div :class="{active:media===1}" @click="subMedia(1)">{{$t("ac.redeem")}}</div>
        <div :class="{active:media===2}" @click="subMedia(2)">{{$t("ac.redeeming")}}</div>
      </div>
      <div v-if="media===0" class="content-form">
        <form action="" method="post">
          <div>
            <label for="">CPU</label>
            <input type="number" value="" v-model="stake_cpu_quantity" />
            <span>{{this.resource.cpuAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div>
            <label for="">NET</label>
            <input type="number" value=""  v-model="stake_net_quantity" />
            <span>{{this.resource.netAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div>
            <label for="">RAM</label>
            <input type="number" value=""  v-model="quant"/>
            <span>{{this.resource.ramAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div  class="button">
            <button type="button" @click="Submission">{{$t("ac.submiit")}}</button>
          </div>
        </form>
      </div>
      <div v-if="media===1" class="content-form">
        <form action="" method="post">
          <div>
            <label for="">CPU</label>
            <input type="number" value="" v-model="unstake_cpu_quantity" />
            <span>{{this.resource.cpuAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div>
            <label for="">NET</label>
            <input type="number" value=""  v-model="unstake_net_quantity" />
            <span>{{this.resource.netAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div>
            <label for="">RAM</label>
            <input type="number" value=""  v-model="bytes"/>
            <span>{{this.resource.ramAvailable}}{{$t("ac.avail")}}</span><br/>
          </div>
          <div  class="button">
            <button type="button" @click="Redeem">{{$t("ac.redeem")}}</button>
          </div>
        </form>
      </div>
      <div v-if="media===2" class="content-process">
         <ul>
           <li class="flex">
              <div>{{$t("ac.redeeming")}} <span>{{content}}</span></div>
              <div style="flex: 1"></div>
              <div class="number">0 DATX</div>
           </li>
           <li class="flex">
             <div>{{$t("ac.mortgageResource")}}</div>
             <div style="flex: 1"></div>
             <div class="number">{{this.resource.totalResource}}</div>
           </li>
           <li class="flex">
           <div>{{$t("ac.redeeming")}}CPU </div>
           <div style="flex: 1"></div>
           <div class="number">{{this.refundList.cpu_amount}}</div>
         </li>
           <li class="flex">
             <div>{{$t("ac.redeeming")}}NET </div>
             <div style="flex: 1"></div>
             <div class="number">{{this.refundList.net_amount}}</div>
           </li>
           <li class="flex">
             <div>RAM</div>
             <div style="flex: 1"></div>
             <div class="number">{{this.resource.ramTotal}}</div>
           </li>
         </ul>
         <div  class="button">
            <button type="button" @click="Receiver">{{$t("ac.receive")}}</button>
         </div>
        </div>
    </div>
    <mortgage-resourse v-if="mortgageState" @morgageListen="morgageListen" :quant='quant' :stake_net_quantity="stake_net_quantity" :stake_cpu_quantity="stake_cpu_quantity"></mortgage-resourse>
    <redee-resourse  v-if="redeeState" @redeeListen="redeeListen" :bytes='bytes' :unstake_net_quantity="unstake_net_quantity" :unstake_cpu_quantity="unstake_cpu_quantity"></redee-resourse>
    <receiver-resourse v-if="receiveState" @receiverListen="receiverListen"> </receiver-resourse>
  </div>
</template>
<script>

  import {getResource, getTokenBalance} from '../../api/chainApi'
  import mortgageResourse from '../frame/mortgageResourse'
  import redeeResourse from '../frame/redeeResourse'
  import receiverResourse from '../frame/receiverResourse'
  import {SecondToDate} from '../../utils/commonUtils'
  import {getRefundInfo} from '../../service/datxService'

  export default {
    data() {
      return {
        media: 0,
        content:'无',
        datxDetail:'',
        mortgageState:false,
        redeeState:false,
        receiveState:false,
        refundList:{
          cpu_amount:'', //抵押CPU资源
          net_amount:'', //抵押NET资源
          seconds:'' //领取的剩余时间
        },
        resource: {
          totalResource: "0 DATX",	//已质押资源
          cpuResource: "0 DATX",		//CPU
          cpuUsed: "0 ms",		//cpu资源已用
          cpuTotal: "0 ms",		//cpu资源总量
          cpuAvailable: "0 ms",//cpu剩余
          netResource: "0 DATX",		//NET
          netUsed: "0 KB",		//net资源已用
          netTotal: "0 KB",		//net资源总量
          netAvailable: "0 DATX",//net剩余
          ramResource: "0 DATX",		//RAM
          ramUsed: "0 KB",			//ram资源已用
          ramTotal: "0 KB",	//ram资源总量
          ramAvailable: "0 DATX",//ram剩余
        },
        allDatx:'0',
        quant:'0', //用于质押内存数量
        bytes:'0',//用于赎回出售数量
        stake_net_quantity:'0', //用于购买带宽的token数量 '20 DATX'
        stake_cpu_quantity:'0', // 用于购买CPU的token数量 '20 DATX'
        unstake_net_quantity:'0',//解除用于购买带宽的token数量 '20 DATX'
        unstake_cpu_quantity:'0',// 解除用于购买带宽的token数量 '20 DATX'

      }
    },

    components:{
      mortgageResourse,
      redeeResourse,
      receiverResourse
    },

    created() {
      this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"));
      this.getAmount();
      this.getRefund();
    },

    methods: {
      // 获取资源
      getAmount(){
        getResource(this.datxDetail.name).then(res => {
          this.resource = res.data;
          // console.log(this.resource)
        });
        getTokenBalance('DATX', this.datxDetail.name).then(res => {
          this.allDatx=res.data.balance;
        });
      },

      getRefund() {
        getRefundInfo(this.datxDetail.name,(erro,data) =>{
          let clock
          window.clearInterval(clock);
          if(!erro){
             this.refundList=data
             let time=this.refundList.seconds
             clock = window.setInterval(() => {
              time--;
              if(time<=0){
                window.clearInterval(clock);
              }
              this.content =SecondToDate(time.toString())
            },1000)
          }else {
            this.content=0
          }
        })
     },
      subMedia(value) {
        this.media = value;
        this.quant='0';
        this.bytes='0';
        this.stake_net_quantity='0';
        this.stake_cpu_quantity='0';
        this.unstake_net_quantity='0';
        this.unstake_cpu_quantity='0';
      },

      // 提交
      Submission(){
        if(parseFloat(this.quant)<=0&&parseFloat(this.stake_net_quantity)<=0&&parseFloat(this.stake_cpu_quantity)<=0){
          this.$message.warning(this.$t('ac.resourseNotice'))
        }else {
          this.mortgageState=true;
        };
      },

      // 赎回
      Redeem(){
        if(parseFloat(this.bytes)<=0&&parseFloat(this.unstake_net_quantity)<=0&&parseFloat(this.unstake_cpu_quantity)<=0){
          this.$message.warning(this.$t('ac.resourseNotice'))
        }else {
          this.redeeState=true;
        };
      },

      // 领取资源
      Receiver(){
        this.receiveState=true
      },

      morgageListen(data){
        this.mortgageState=data;
      },

      redeeListen(data){
        this.redeeState=data
      },

      receiverListen(data){
        this.receiveState=data
      },

    }
  }
</script>
<style lang="less" scoped>
  .accountright {
    margin-left: 20px;
    background: #fff;
    min-height: 325px;
    border-radius: 4px;
    .content {
      padding: 25px 40px;
      &-media {
        font-size: 16px;
        border-bottom: 1px solid #e0e0e0;
        div {
          padding-bottom: 9px;
          margin-right: 45px;
          color: #98889b;
          cursor: pointer;
        }
        .active {
          color: #98889b;
          border-bottom: 2px solid #98889b;
        }
      }
      &-form {
        margin: 10px 0;
        form {
          div {
            margin: 20px 0;
          }
          label {
            font-weight: bold;
            width: 44px;
            display: inline-block;
          }
          input {
            width: 260px;
            height: 34px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
          }
          span {
            font-size: 12px;
            color: #666666;
          }
          .button {
            margin-top: 30px;
            button {
              margin: 0 auto;
              display: block;
              width: 320px;
              text-align: center;
              line-height: 30px;
              color: #fff;
              background: #98889b;
              outline: none;
              border: none;
              cursor: pointer;
            }
            button:hover {
              opacity: .8;
            }
          }
        }
      }
      &-process{
        ul{
          margin: 20px 0;
          font-weight: bold;
          line-height: 30px;
          .number{
            font-weight: normal;
          }
          span{
            padding: 0 10px;
          }
        }
        .button {
          margin-top: 30px;
          button {
            margin: 0 auto;
            display: block;
            width: 320px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background: #98889b;
            outline: none;
            border: none;
            cursor: pointer;
          }
          button:hover {
            opacity: .8;
          }
        }
      }
    }
    .flex {
      display: flex;
    }
  }
</style>

